import { Link, Warning } from '@brillout/docpress'
import { ConfigSpec } from '../../components'

<ConfigSpec
  cumulative
  isTypeOneLiner
>
`string[] {:ts}`
</ConfigSpec>

Most <Link href="/pageContext">`pageContext`</Link> and <Link href="/globalContext">`globalContext`</Link> properties are available only on the server-side, but you can use `passToClient` to make properties available on the client-side.

```ts
// /pages/+config.ts
// Environment: config

import type { Config } from 'vike/types'

export default {
  passToClient: [
    // pageContext.someData
    'someData',
    // pageContext.user.id
    'user.id', // nested
    // pageContext.user.info.avatar.url
    'user.avatar.url', // deeply nested
  ]
} satisfies Config
```

```ts
// /pages/+onHydrationEnd.ts
// Environment: client

import type { PageContextClient } from 'vike/types'

export { onHydrationEnd }

async function onHydrationEnd(pageContext: PageContextClient) {
  // Available here on the client-side thanks to passToClient
  console.log(pageContext.someData)
  console.log(pageContext.user.id)
  console.log(pageContext.user.avatar.url)
  // ...
}
```

Some values, such as `pageContext.data`, are already passed to the client-side by default, see <Link href="#default" />.


## Default

When using <Link href="/client-routing" noBreadcrumb={true} />, the following are also available on the client-side by default:
 - `pageContext.Page`
 - `pageContext.data`
 - `pageContext.config`
 - `pageContext.isHydration`
 - `pageContext.isBackwardNavigation`
 - `pageContext.routeParams`
 - `pageContext.urlOriginal`
 - `pageContext.urlPathname`
 - `pageContext.urlParsed`

When using <Link href="/server-routing" noBreadcrumb={true} />, the following are also available on the client-side by default:
 - `pageContext.Page`
 - `pageContext.data`
 - `pageContext.config`
 - `pageContext.routeParams`


## Serialization

Serialization is done with [`@brillout/json-serializer`](https://github.com/brillout/json-serializer).

User-defined classes are lost during serialization:

```ts
class MyClass {
  prop = 42
}

// On the server-side:
const obj = new MyClass()
console.log(obj) // MyClass { prop: 42 }
console.log(obj instanceof MyClass) // true

// On the browser-side, after `obj` was (de)serialized:
console.log(obj) // { prop: 42 }
console.log(obj instanceof MyClass) // false
```

See [GitHub > `brillout/json-serializer` > #3 Support user-defined classes](https://github.com/brillout/json-serializer/issues/3).


## Escape `.`

In the (unlikely) event you need to pass properties that include `.` in their name:

```ts
// /pages/+config.ts
// Environment: config

import type { Config } from 'vike/types'

export default {
  passToClient: [
    // pageContext['some-weird.prop-name']
    'some-weird\\.prop-name',
    // pageContext['some-weird\\.prop-name']
    'some-weird\\\\.prop-name',
    // pageContext['some-weird\\\\.prop-name']
    'some-weird\\\\\\.prop-name'
  ]
} satisfies Config
```


## See also

- <Link href="/pageContext" />
- <Link href="/globalContext" />
- <Link href="/usePageContext" />
- <Link href="/pageContext.json" />
- <Link href="/settings" />
